<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>Long Tasks API 1</title>
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <meta content="ED" name="w3c-status">
  <link href="https://www.w3.org/StyleSheets/TR/2016/W3C-ED" rel="stylesheet" type="text/css">
  <link href="https://w3c.github.io/longtasks/" rel="canonical">
<style>
dl {
    margin-left: 2em;
}
</style>
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-var-click-highlighting */

    var { cursor: pointer; }
    var.selected0 { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
    var.selected1 { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
    var.selected2 { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
    var.selected3 { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
    var.selected4 { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
    var.selected5 { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
    var.selected6 { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
    </style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-syntax-highlighting */
pre.idl.highlight { color: #708090; }
.highlight:not(.idl) { background: hsl(24, 20%, 95%); }
code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
c-[a] { color: #990055 } /* Keyword.Declaration */
c-[b] { color: #990055 } /* Keyword.Type */
c-[c] { color: #708090 } /* Comment */
c-[d] { color: #708090 } /* Comment.Multiline */
c-[e] { color: #0077aa } /* Name.Attribute */
c-[f] { color: #669900 } /* Name.Tag */
c-[g] { color: #222222 } /* Name.Variable */
c-[k] { color: #990055 } /* Keyword */
c-[l] { color: #000000 } /* Literal */
c-[m] { color: #000000 } /* Literal.Number */
c-[n] { color: #0077aa } /* Name */
c-[o] { color: #999999 } /* Operator */
c-[p] { color: #999999 } /* Punctuation */
c-[s] { color: #a67f59 } /* Literal.String */
c-[t] { color: #a67f59 } /* Literal.String.Single */
c-[u] { color: #a67f59 } /* Literal.String.Double */
c-[cp] { color: #708090 } /* Comment.Preproc */
c-[c1] { color: #708090 } /* Comment.Single */
c-[cs] { color: #708090 } /* Comment.Special */
c-[kc] { color: #990055 } /* Keyword.Constant */
c-[kn] { color: #990055 } /* Keyword.Namespace */
c-[kp] { color: #990055 } /* Keyword.Pseudo */
c-[kr] { color: #990055 } /* Keyword.Reserved */
c-[ld] { color: #000000 } /* Literal.Date */
c-[nc] { color: #0077aa } /* Name.Class */
c-[no] { color: #0077aa } /* Name.Constant */
c-[nd] { color: #0077aa } /* Name.Decorator */
c-[ni] { color: #0077aa } /* Name.Entity */
c-[ne] { color: #0077aa } /* Name.Exception */
c-[nf] { color: #0077aa } /* Name.Function */
c-[nl] { color: #0077aa } /* Name.Label */
c-[nn] { color: #0077aa } /* Name.Namespace */
c-[py] { color: #0077aa } /* Name.Property */
c-[ow] { color: #999999 } /* Operator.Word */
c-[mb] { color: #000000 } /* Literal.Number.Bin */
c-[mf] { color: #000000 } /* Literal.Number.Float */
c-[mh] { color: #000000 } /* Literal.Number.Hex */
c-[mi] { color: #000000 } /* Literal.Number.Integer */
c-[mo] { color: #000000 } /* Literal.Number.Oct */
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
c-[sc] { color: #a67f59 } /* Literal.String.Char */
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
c-[se] { color: #a67f59 } /* Literal.String.Escape */
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
c-[sx] { color: #a67f59 } /* Literal.String.Other */
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
c-[vc] { color: #0077aa } /* Name.Variable.Class */
c-[vg] { color: #0077aa } /* Name.Variable.Global */
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
</style>
 <body class="h-entry">
  <div class="head">
   <header>
    <p data-fill-with="logo"><a href="https://www.w3.org/"><img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72"></a> </p>
    <h1 class="p-name no-ref" id="title">Long Tasks API 1</h1>
    <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   </header>
   <div data-fill-with="spec-metadata">
    <dl>
     <dt>This version:
     <dd><a class="u-url" href="https://w3c.github.io/longtasks/">https://w3c.github.io/longtasks/</a>
     <dt>Test Suite:
     <dd><a href="http://w3c-test.org/longtask-timing/">http://w3c-test.org/longtask-timing/</a>
     <dt class="editor">Editors:
     <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:panicker@chromium.org">Shubhie Panicker</a> (<a class="p-org org" href="https://google.com">Google</a>)
     <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:igrigorik@chromium.org">Ilya Grigorik</a> (<a class="p-org org" href="https://google.com">Google</a>)
     <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:domenic@chromium.org">Domenic Denicola</a> (<a class="p-org org" href="https://google.com">Google</a>)
    </dl>
   </div>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document" rel="license">permissive document license</a> rules apply. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>This document defines an API that web page authors can use to detect presence of "long tasks" that monopolize the UI thread for extended periods of time and block other critical tasks from being executed - e.g. reacting to user input.</p>
  </div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p> <em>This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current <abbr title="World Wide Web Consortium">W3C</abbr> publications and the latest revision of this technical report can be found in the <a href="https://www.w3.org/TR/"><abbr title="World Wide Web Consortium">W3C</abbr> technical reports index</a> at https://www.w3.org/TR/.</em> </p>
   <p> This document was published by the <a href="https://www.w3.org/webperf/">Web Performance Working Group</a> as an Editors Draft. This document is intended to become a W3C Recommendation. </p>
   <p></p>
   <p>If you wish to make comments regarding this document, please send them to <a href="mailto:public-web-perf@w3.org?subject=%5BLongTasks%5D">public-web-perf@w3.org</a> (<a href="mailto:public-web-perf-request@w3.org?subject=subscribe">subscribe</a>, <a href="https://lists.w3.org/Archives/Public/public-web-perf/">archives</a>) with <code>[LongTasks]</code> at the start of your email’s subject.</p>
   <p></p>
   <p> Feedback and comments on this specification are welcome, please send them to <a href="mailto:public-web-perf@w3.org?subject=%5Blongtasks%5D">public-web-perf@w3.org</a> (<a href="mailto:public-web-perf-request@w3.org?subject=subscribe">subscribe</a>, <a href="https://lists.w3.org/Archives/Public/public-web-perf/">archives</a>) with <code class="highlight"><c- p>[</c->longtasks<c- p>]</c-></code> at the start of your email’s subject. </p>
   <p> Publication as an Editors Draft does not imply endorsement by the <abbr title="World Wide Web Consortium">W3C</abbr> Membership. This is a draft document and may
    be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite
    this document as other than work in progress. </p>
   <p> This document was produced by a group operating under the <a href="https://www.w3.org/Consortium/Patent-Policy/"><abbr title="World Wide Web Consortium">W3C</abbr> Patent Policy</a>. <abbr title="World Wide Web Consortium">W3C</abbr> maintains a <a href="https://www.w3.org/2004/01/pp-impl/45211/status" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains <a href="https://www.w3.org/Consortium/Patent-Policy/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="https://www.w3.org/Consortium/Patent-Policy/#sec-Disclosure">section 6 of the <abbr title="World Wide Web Consortium">W3C</abbr> Patent Policy</a>. </p>
   <p>This document is governed by the <a href="https://www.w3.org/2019/Process-20190301/" id="w3c_process_revision">1 March 2019 W3C Process Document</a>. </p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li>
     <a href="#intro"><span class="secno">1</span> <span class="content">Introduction</span></a>
     <ol class="toc">
      <li><a href="#example"><span class="secno">1.1</span> <span class="content">Usage Example</span></a>
     </ol>
    <li><a href="#sec-terminology"><span class="secno">2</span> <span class="content">Terminology</span></a>
    <li>
     <a href="#sec-longtask-timing"><span class="secno">3</span> <span class="content">Long Task Timing</span></a>
     <ol class="toc">
      <li><a href="#sec-PerformanceLongTaskTiming"><span class="secno">3.1</span> <span class="content"><code class="idl"><span>PerformanceLongTaskTiming</span></code> interface</span></a>
      <li><a href="#sec-TaskAttributionTiming"><span class="secno">3.2</span> <span class="content"><code class="idl"><span>TaskAttributionTiming</span></code> interface</span></a>
      <li><a href="#sec-PointingToCulprit"><span class="secno">3.3</span> <span class="content">Pointing to the culprit</span></a>
     </ol>
    <li>
     <a href="#sec-processing-model"><span class="secno">4</span> <span class="content">Processing model</span></a>
     <ol class="toc">
      <li><a href="#report-long-tasks"><span class="secno">4.1</span> <span class="content">Report long tasks</span></a>
     </ol>
    <li><a href="#priv-sec"><span class="secno">5</span> <span class="content">Security &amp; privacy considerations</span></a>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
     </ol>
    <li><a href="#idl-index"><span class="secno"></span> <span class="content">IDL Index</span></a>
   </ol>
  </nav>
  <main>
   <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content">Introduction</span><a class="self-link" href="#intro"></a></h2>
   <p>As the page is loading and while the user is interacting with the page afterwards, both the application and browser queue various events that are then executed by the browser -- e.g. user agent schedules input events based on user’s activity, the application schedules callbacks for requestAnimationFrame and other callbacks, etc. Once in the queue, the browser dequeues these events one-by-one and executes them.</p>
   <p>However, some tasks can take a long time (multiple frames) and if/when that happens, the UI thread may become blocked and block all other tasks as well. To the user, this is commonly visible as a "locked up" page where the browser is unable to respond to user input; this is a major source of bad user experience on the web today:</p>
   <dl>
    <dt data-md>Delayed "time to Interactive":
    <dd data-md>
     <p>while the page is loading, or even completely visually rendered, long tasks often tie up the main thread and prevent the user from interacting with the page. Poorly designed third-party content is frequently the culprit.</p>
    <dt data-md>High/variable input latency:
    <dd data-md>
     <p>critical user-interaction events (e.g. tap, click, scroll, wheel, etc.) are queued behind long tasks which yields janky and unpredictable user experience.</p>
    <dt data-md>High/variable event handling latency:
    <dd data-md>
     <p>like input, processing event callbacks (e.g. onload events, etc.) delay application updates.</p>
    <dt data-md>Janky animations and scrolling:
    <dd data-md>
     <p>some animation and scrolling interactions require coordination between compositor and main threads; if a long task is blocking the main thread it can affect responsiveness of animations and scrolling.</p>
   </dl>
   <p>Some applications (and <a href="https://en.wikipedia.org/wiki/Real_user_monitoring">RUM</a> vendors) are already attempting to identify and track cases where "long tasks" happen. For example, one known pattern is to install a ~short periodic timer and inspect the elapsed time between the successive expirations: if the elapsed time is greater than the timer period, then there is high likelihood that one or more long tasks have delayed execution of the event loop. This approach mostly works but has several bad performance implications: by polling to detect long tasks, the application prevents quiescence and long idle blocks (see requestIdleCallback); it’s bad for battery life; there is no way to know what is causing the delay (e.g. first party or third party code).</p>
   <p>The <a href="https://developers.google.com/web/fundamentals/performance/rail">RAIL</a> performance model suggests that applications should respond to user input in less than 100ms (for touch move and scrolling, the threshold is 16ms). The goal of this API is to surface notifications about tasks that may prevent the application from hitting these targets. This API surfaces tasks that take 50ms or more. A website without these tasks should respond to user input in under 100ms: it will take less than 50ms to finish the task that is being executed when the user input is received and less than 50ms to execute the task to react to such user input.</p>
   <h3 class="heading settled" data-level="1.1" id="example"><span class="secno">1.1. </span><span class="content">Usage Example</span><a class="self-link" href="#example"></a></h3>
<pre class="example highlight" id="example-872f1566"><a class="self-link" href="#example-872f1566"></a><c- kr>const</c-> observer <c- o>=</c-> <c- k>new</c-> PerformanceObserver<c- p>(</c-><c- a>function</c-><c- p>(</c->list<c- p>)</c-> <c- p>{</c->
    <c- k>for</c-> <c- p>(</c-><c- kr>const</c-> entry <c- k>of</c-> list<c- p>.</c->getEntries<c- p>())</c-> <c- p>{</c->
        <c- c1>// Process long task notifications:</c->
        <c- c1>// report back for analytics and monitoring</c->
        <c- c1>// ...</c->
    <c- p>}</c->
<c- p>});</c->
<c- c1>// Register observer for previous and future long task notifications.</c->
observer<c- p>.</c->observe<c- p>({</c->type<c- o>:</c-> <c- u>"longtask"</c-><c- p>,</c-> buffered<c- o>:</c-> <c- kc>true</c-><c- p>});</c->
<c- c1>// Long script execution after this will result in queueing</c->
<c- c1>// and receiving "longtask" entries in the observer.</c->
</pre>
   <h2 class="heading settled" data-level="2" id="sec-terminology"><span class="secno">2. </span><span class="content">Terminology</span><a class="self-link" href="#sec-terminology"></a></h2>
   <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="long-task">Long task</dfn> refers to any of the following occurrences whose duration exceeds 50ms:</p>
   <ul>
    <li data-md>
     <p>An event loop <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-task" id="ref-for-concept-task">task</a> plus the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#perform-a-microtask-checkpoint" id="ref-for-perform-a-microtask-checkpoint">perform a microtask checkpoint</a> that follows immediately afterwards. This captures the duration of an event loop <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-task" id="ref-for-concept-task①">task</a>, including its associated <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#microtask" id="ref-for-microtask">microtasks</a>.</p>
    <li data-md>
     <p>An <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#update-the-rendering" id="ref-for-update-the-rendering">update the rendering</a> step within the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model" id="ref-for-event-loop-processing-model">event loop processing model</a>.</p>
    <li data-md>
     <p>A pause between the last step and the next first step of the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model" id="ref-for-event-loop-processing-model①">event loop processing model</a>. This captures any work that the user agent performs in its UI thread outside of the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-loop" id="ref-for-event-loop">event loop</a>.</p>
   </ul>
   <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="culprit-browsing-context-container">Culprit browsing context container</dfn> refers to the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#browsing-context-container" id="ref-for-browsing-context-container">browsing context container</a> (<code class="highlight"><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-iframe-element" id="ref-for-the-iframe-element">iframe</a></code>, <code class="highlight"><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-object-element" id="ref-for-the-object-element">object</a></code>, etc.) that is being implicated, on the whole, for a <a data-link-type="dfn" href="#long-task" id="ref-for-long-task">long task</a>.</p>
   <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="attribution">Attribution</dfn> refers to identifying the type of work (such as script, layout etc.) that contributed significantly to the long task, as well as identifying which <a data-link-type="dfn" href="#culprit-browsing-context-container" id="ref-for-culprit-browsing-context-container">culprit browsing context container</a> is responsible for that work.</p>
   <h2 class="heading settled" data-level="3" id="sec-longtask-timing"><span class="secno">3. </span><span class="content">Long Task Timing</span><a class="self-link" href="#sec-longtask-timing"></a></h2>
   <p>Long Task timing involves the following new interfaces:</p>
   <h3 class="heading settled" data-level="3.1" id="sec-PerformanceLongTaskTiming"><span class="secno">3.1. </span><span class="content"><code class="idl"><a data-link-type="idl" href="#performancelongtasktiming" id="ref-for-performancelongtasktiming">PerformanceLongTaskTiming</a></code> interface</span><a class="self-link" href="#sec-PerformanceLongTaskTiming"></a></h3>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="performancelongtasktiming"><code class="highlight"><c- g>PerformanceLongTaskTiming</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="https://w3c.github.io/performance-timeline/#the-performanceentry-interface" id="ref-for-the-performanceentry-interface"><c- n>PerformanceEntry</c-></a> {
    <c- b>readonly</c-> <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<a class="n" data-link-type="idl-name" href="#taskattributiontiming" id="ref-for-taskattributiontiming"><c- n>TaskAttributionTiming</c-></a>> <a class="idl-code" data-link-type="attribute" data-readonly data-type="FrozenArray<TaskAttributionTiming>" href="#dom-performancelongtasktiming-attribution" id="ref-for-dom-performancelongtasktiming-attribution"><c- g>attribution</c-></a>;
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Default" id="ref-for-Default"><c- g>Default</c-></a>] <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-object" id="ref-for-idl-object"><c- b>object</c-></a> <dfn class="idl-code" data-dfn-for="PerformanceLongTaskTiming" data-dfn-type="method" data-export data-lt="toJSON()" id="dom-performancelongtasktiming-tojson"><code class="highlight"><c- g>toJSON</c-></code><a class="self-link" href="#dom-performancelongtasktiming-tojson"></a></dfn>();
};
</pre>
   <p>The values of the attributes of a <code class="idl"><a data-link-type="idl" href="#performancelongtasktiming" id="ref-for-performancelongtasktiming①">PerformanceLongTaskTiming</a></code> are set in the processing model in <a href="#report-long-tasks">§ 4.1 Report long tasks</a>. The following provides an informative summary of how they will be set.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#dom-performanceentry-name" id="ref-for-dom-performanceentry-name">name</a></code> attribute’s getter will return one of the following strings:</p>
   <dl>
    <dt data-md>"<code class="highlight"><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="unknown">unknown</dfn></code>"
    <dd data-md>
     <p>The long task originated from an <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#update-the-rendering" id="ref-for-update-the-rendering①">update the rendering</a> step within the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model" id="ref-for-event-loop-processing-model②">event loop processing model</a> or work the user agent performed outside of the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-loop" id="ref-for-event-loop①">event loop</a>.</p>
    <dt data-md>"<code class="highlight"><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="self">self</dfn></code>"
    <dd data-md>
     <p>The long task originated from an event loop <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-task" id="ref-for-concept-task②">task</a> within this <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#browsing-context" id="ref-for-browsing-context">browsing context</a>.</p>
    <dt data-md>"<code class="highlight"><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="same-origin-ancestor">same<c- o>-</c->origin<c- o>-</c->ancestor</dfn></code>"
    <dd data-md>
     <p>The long task originated from an event loop <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-task" id="ref-for-concept-task③">task</a> within a <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/origin.html#same-origin" id="ref-for-same-origin">same-origin</a> <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#ancestor-browsing-context" id="ref-for-ancestor-browsing-context">ancestor browsing context</a>.</p>
    <dt data-md>"<code class="highlight"><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="same-origin-descendant">same<c- o>-</c->origin<c- o>-</c->descendant</dfn></code>"
    <dd data-md>
     <p>The long task originated from an event loop <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-task" id="ref-for-concept-task④">task</a> within a <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/origin.html#same-origin" id="ref-for-same-origin①">same-origin</a> <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/#list-of-the-descendant-browsing-contexts" id="ref-for-list-of-the-descendant-browsing-contexts">descendant browsing context</a>.</p>
    <dt data-md>"<code class="highlight"><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="same-origin">same<c- o>-</c->origin</dfn></code>"
    <dd data-md>
     <p>The long task originated from an event loop <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-task" id="ref-for-concept-task⑤">task</a> within a <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/origin.html#same-origin" id="ref-for-same-origin②">same-origin</a> <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#browsing-context" id="ref-for-browsing-context①">browsing context</a> that is not an ancestor or descendant.</p>
    <dt data-md>"<code class="highlight"><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="cross-origin-ancestor">cross<c- o>-</c->origin<c- o>-</c->ancestor</dfn></code>"
    <dd data-md>
     <p>The long task originated from an event loop <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-task" id="ref-for-concept-task⑥">task</a> within a cross-origin <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#ancestor-browsing-context" id="ref-for-ancestor-browsing-context①">ancestor browsing context</a>.</p>
    <dt data-md>"<code class="highlight"><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="cross-origin-descendant">cross<c- o>-</c->origin<c- o>-</c->descendant</dfn></code>"
    <dd data-md>
     <p>The long task originated from an event loop <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-task" id="ref-for-concept-task⑦">task</a> within a cross-origin <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/#list-of-the-descendant-browsing-contexts" id="ref-for-list-of-the-descendant-browsing-contexts①">descendant browsing context</a>.</p>
    <dt data-md>"<code class="highlight"><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="cross-origin-unreachable">cross<c- o>-</c->origin<c- o>-</c->unreachable</dfn></code>"
    <dd data-md>
     <p>The long task originated from an event loop <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-task" id="ref-for-concept-task⑧">task</a> within a cross-origin <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#browsing-context" id="ref-for-browsing-context②">browsing context</a> that is not an ancestor or descendant.</p>
    <dt data-md>"<code class="highlight"><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="multiple-contexts">multiple<c- o>-</c->contexts</dfn></code>"
    <dd data-md>
     <p>The long task originated from an event loop <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-task" id="ref-for-concept-task⑨">task</a> involving multiple <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#browsing-context" id="ref-for-browsing-context③">browsing contexts</a>.</p>
   </dl>
   <p>The <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#dom-performanceentry-entrytype" id="ref-for-dom-performanceentry-entrytype">entryType</a></code> attribute’s getter will return <code class="highlight"><c- u>"longtask"</c-></code>.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#dom-performanceentry-starttime" id="ref-for-dom-performanceentry-starttime">startTime</a></code> attribute’s getter will return a <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/hr-time/#idl-def-domhighrestimestamp" id="ref-for-idl-def-domhighrestimestamp">DOMHighResTimeStamp</a></code> of when the task started.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#dom-performanceentry-duration" id="ref-for-dom-performanceentry-duration">duration</a></code> attribute’s getter will return a <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/hr-time/#idl-def-domhighrestimestamp" id="ref-for-idl-def-domhighrestimestamp①">DOMHighResTimeStamp</a></code> equal to the elapsed time between the start and end of task.</p>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="PerformanceLongTaskTiming" data-dfn-type="attribute" data-export id="dom-performancelongtasktiming-attribution"><code class="highlight">attribution</code></dfn> attribute’s getter will return a frozen array of <code class="idl"><a data-link-type="idl" href="#taskattributiontiming" id="ref-for-taskattributiontiming①">TaskAttributionTiming</a></code> entries.</p>
   <h3 class="heading settled" data-level="3.2" id="sec-TaskAttributionTiming"><span class="secno">3.2. </span><span class="content"><code class="idl"><a data-link-type="idl" href="#taskattributiontiming" id="ref-for-taskattributiontiming②">TaskAttributionTiming</a></code> interface</span><a class="self-link" href="#sec-TaskAttributionTiming"></a></h3>
<pre class="def idl highlight">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed①"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="taskattributiontiming"><code class="highlight"><c- g>TaskAttributionTiming</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="https://w3c.github.io/performance-timeline/#the-performanceentry-interface" id="ref-for-the-performanceentry-interface①"><c- n>PerformanceEntry</c-></a> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString"><c- b>DOMString</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMString" href="#dom-taskattributiontiming-containertype" id="ref-for-dom-taskattributiontiming-containertype"><c- g>containerType</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①"><c- b>DOMString</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMString" href="#dom-taskattributiontiming-containersrc" id="ref-for-dom-taskattributiontiming-containersrc"><c- g>containerSrc</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString②"><c- b>DOMString</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMString" href="#dom-taskattributiontiming-containerid" id="ref-for-dom-taskattributiontiming-containerid"><c- g>containerId</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString③"><c- b>DOMString</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMString" href="#dom-taskattributiontiming-containername" id="ref-for-dom-taskattributiontiming-containername"><c- g>containerName</c-></a>;
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Default" id="ref-for-Default①"><c- g>Default</c-></a>] <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-object" id="ref-for-idl-object①"><c- b>object</c-></a> <dfn class="idl-code" data-dfn-for="TaskAttributionTiming" data-dfn-type="method" data-export data-lt="toJSON()" id="dom-taskattributiontiming-tojson"><code class="highlight"><c- g>toJSON</c-></code><a class="self-link" href="#dom-taskattributiontiming-tojson"></a></dfn>();
};
</pre>
   <p>The values of the attributes of a <code class="idl"><a data-link-type="idl" href="#taskattributiontiming" id="ref-for-taskattributiontiming③">TaskAttributionTiming</a></code> are set in the processing model in <a href="#report-long-tasks">§ 4.1 Report long tasks</a>. The following provides an informative summary of how they will be set.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#dom-performanceentry-name" id="ref-for-dom-performanceentry-name①">name</a></code> attribute’s getter will always return "<code class="highlight">unknown</code>".</p>
   <p>The <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#dom-performanceentry-entrytype" id="ref-for-dom-performanceentry-entrytype①">entryType</a></code> attribute’s getter will always return "<code class="highlight">taskattribution</code>".</p>
   <p>The <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#dom-performanceentry-starttime" id="ref-for-dom-performanceentry-starttime①">startTime</a></code> attribute’s getter will always return 0.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#dom-performanceentry-duration" id="ref-for-dom-performanceentry-duration①">duration</a></code> attribute’s getter will always return 0.</p>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="TaskAttributionTiming" data-dfn-type="attribute" data-export id="dom-taskattributiontiming-containertype"><code class="highlight">containerType</code></dfn> attribute’s getter will return the type of the <a data-link-type="dfn" href="#culprit-browsing-context-container" id="ref-for-culprit-browsing-context-container①">culprit browsing context container</a>, such as "<code class="highlight">iframe</code>", "<code class="highlight">embed</code>", or "<code class="highlight">object</code>". If no single <a data-link-type="dfn" href="#culprit-browsing-context-container" id="ref-for-culprit-browsing-context-container②">culprit browsing context container</a> is found, it will return "<code class="highlight">window</code>".</p>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="TaskAttributionTiming" data-dfn-type="attribute" data-export id="dom-taskattributiontiming-containername"><code class="highlight">containerName</code></dfn> attribute’s getter will return the value of the <a data-link-type="dfn" href="#culprit-browsing-context-container" id="ref-for-culprit-browsing-context-container③">container</a>’s <code class="highlight">name</code> content attribute. If no single <a data-link-type="dfn" href="#culprit-browsing-context-container" id="ref-for-culprit-browsing-context-container④">culprit browsing context container</a> is found, it will return the empty string.</p>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="TaskAttributionTiming" data-dfn-type="attribute" data-export id="dom-taskattributiontiming-containerid"><code class="highlight">containerId</code></dfn> attribute’s getter will return the value of the <a data-link-type="dfn" href="#culprit-browsing-context-container" id="ref-for-culprit-browsing-context-container⑤">container</a>’s <code class="highlight">id</code> content attribute. If no single <a data-link-type="dfn" href="#culprit-browsing-context-container" id="ref-for-culprit-browsing-context-container⑥">culprit browsing context container</a> is found, it will return the empty string.</p>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="TaskAttributionTiming" data-dfn-type="attribute" data-export id="dom-taskattributiontiming-containersrc"><code class="highlight">containerSrc</code></dfn> attribute’s getter will return the value of the <a data-link-type="dfn" href="#culprit-browsing-context-container" id="ref-for-culprit-browsing-context-container⑦">container</a>’s <code class="highlight">src</code> content attribute. If no single <a data-link-type="dfn" href="#culprit-browsing-context-container" id="ref-for-culprit-browsing-context-container⑧">culprit browsing context container</a> is found, it will return the empty string.</p>
   <h3 class="heading settled" data-level="3.3" id="sec-PointingToCulprit"><span class="secno">3.3. </span><span class="content">Pointing to the culprit</span><a class="self-link" href="#sec-PointingToCulprit"></a></h3>
   <div class="non-normative">
    <p><em>This section is non-normative.</em></p>
    <p>A <a data-link-type="dfn" href="#long-task" id="ref-for-long-task①">long task</a> can involve different types of work (such as script, layout, style etc), and it could be executed within different <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#browsing-context" id="ref-for-browsing-context④">browsing contexts</a>, or it could be global in nature such as a long garbage collection that spans the entire <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/#integration-with-the-javascript-agent-cluster-formalism" id="ref-for-integration-with-the-javascript-agent-cluster-formalism">agent cluster</a> or <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/#unit-of-related-browsing-contexts" id="ref-for-unit-of-related-browsing-contexts">unit of related browsing contexts</a>.</p>
    <p>Thus <a data-link-type="dfn" href="#attribution" id="ref-for-attribution">attribution</a> has a couple of facets:</p>
    <ul>
     <li data-md>
      <p>Pointing to the origin of the long task and/or the overall location of the <a data-link-type="dfn" href="#culprit-browsing-context-container" id="ref-for-culprit-browsing-context-container⑨">culprit browsing context</a>: this is referred to as <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="minimal-culprit-attribution">minimal culprit attribution</dfn> and is captured in the <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#dom-performanceentry-name" id="ref-for-dom-performanceentry-name②">name</a></code> field.</p>
     <li data-md>
      <p>Pointing to the type of work involved in the <a data-link-type="dfn" href="#long-task" id="ref-for-long-task②">long task</a>, and its associated <a data-link-type="dfn" href="#culprit-browsing-context-container" id="ref-for-culprit-browsing-context-container①⓪">culprit browsing context container</a>: this is captured in <code class="idl"><a data-link-type="idl" href="#taskattributiontiming" id="ref-for-taskattributiontiming④">TaskAttributionTiming</a></code> objects in the <code class="idl"><a data-link-type="idl" href="#dom-performancelongtasktiming-attribution" id="ref-for-dom-performancelongtasktiming-attribution①">attribution</a></code> field of <code class="idl"><a data-link-type="idl" href="#performancelongtasktiming" id="ref-for-performancelongtasktiming②">PerformanceLongTaskTiming</a></code>.</p>
    </ul>
    <p>Therefore, <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#dom-performanceentry-name" id="ref-for-dom-performanceentry-name③">name</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-performancelongtasktiming-attribution" id="ref-for-dom-performancelongtasktiming-attribution②">attribution</a></code> fields on <code class="idl"><a data-link-type="idl" href="#performancelongtasktiming" id="ref-for-performancelongtasktiming③">PerformanceLongTaskTiming</a></code> together paint the picture for where the blame rests for a long task.
When delivering this information the Web’s same-origin policy must be adhered to.</p>
    <p>These fields are not independent. The following gives an overview of how they are related:</p>
    <table>
     <thead>
      <tr>
       <th><code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#dom-performanceentry-name" id="ref-for-dom-performanceentry-name④">name</a></code>
       <th><a data-link-type="dfn" href="#culprit-browsing-context-container" id="ref-for-culprit-browsing-context-container①①">Culprit browsing context container</a> implicated by <code class="idl"><a data-link-type="idl" href="#dom-performancelongtasktiming-attribution" id="ref-for-dom-performancelongtasktiming-attribution③">attribution</a></code>
     <tbody>
      <tr>
       <td>"<code class="highlight"><a data-link-type="dfn" href="#self" id="ref-for-self">self</a></code>" 
       <td>empty 
      <tr>
       <td>"<code class="highlight"><a data-link-type="dfn" href="#same-origin-ancestor" id="ref-for-same-origin-ancestor">same<c- o>-</c->origin<c- o>-</c->ancestor</a></code>" 
       <td>same-origin culprit 
      <tr>
       <td>"<code class="highlight"><a data-link-type="dfn" href="#same-origin-descendant" id="ref-for-same-origin-descendant">same<c- o>-</c->origin<c- o>-</c->descendant</a></code>" 
       <td>same-origin culprit 
      <tr>
       <td>"<code class="highlight"><a data-link-type="dfn" href="#same-origin" id="ref-for-same-origin③">same<c- o>-</c->origin</a></code>" 
       <td>same-origin culprit 
      <tr>
       <td>"<code class="highlight"><a data-link-type="dfn" href="#cross-origin-ancestor" id="ref-for-cross-origin-ancestor">cross<c- o>-</c->origin<c- o>-</c->ancestor</a></code>" 
       <td>empty 
      <tr>
       <td>"<code class="highlight"><a data-link-type="dfn" href="#cross-origin-descendant" id="ref-for-cross-origin-descendant">cross<c- o>-</c->origin<c- o>-</c->descendant</a></code>" 
       <td>empty 
      <tr>
       <td>"<code class="highlight"><a data-link-type="dfn" href="#cross-origin-unreachable" id="ref-for-cross-origin-unreachable">cross<c- o>-</c->origin<c- o>-</c->unreachable</a></code>" 
       <td>empty 
      <tr>
       <td>"<code class="highlight"><a data-link-type="dfn" href="#multiple-contexts" id="ref-for-multiple-contexts">multiple<c- o>-</c->contexts</a></code>" 
       <td>empty 
      <tr>
       <td>"<code class="highlight"><a data-link-type="dfn" href="#unknown" id="ref-for-unknown">unknown</a></code>" 
       <td>empty 
    </table>
   </div>
   <h2 class="heading settled" data-level="4" id="sec-processing-model"><span class="secno">4. </span><span class="content">Processing model</span><a class="self-link" href="#sec-processing-model"></a></h2>
   <p class="note" role="note"><span>Note:</span> A user agent implementing the Long Tasks API would need to include <code class="highlight"><c- u>"longtask"</c-></code> in <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#supportedentrytypes-attribute" id="ref-for-supportedentrytypes-attribute">supportedEntryTypes</a></code> for <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/window-object.html#window" id="ref-for-window">Window</a></code> contexts.
This allows developers to detect support for long tasks.</p>
   <h3 class="heading settled" data-level="4.1" id="report-long-tasks"><span class="secno">4.1. </span><span class="content">Report long tasks</span><a class="self-link" href="#report-long-tasks"></a></h3>
   <div class="algorithm" data-algorithm="Report long tasks">
     Given <var>start time</var>, <var>end time</var>, <var>top-level browsing contexts</var>, and optionally <var>task</var>, perform the following algorithm: 
    <ol>
     <li data-md>
      <p>If <var>end time</var> minus <var>start time</var> is less than the long tasks threshold of 50 ms, abort these steps.</p>
     <li data-md>
      <p>Let <var>destinationRealms</var> be an empty set.</p>
     <li data-md>
      <p>Determine the set of <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-code-realms" id="ref-for-sec-code-realms">JavaScript Realms</a> to which reports will be delivered:</p>
      <p>For each <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#top-level-browsing-context" id="ref-for-top-level-browsing-context">top-level browsing context</a> <var>topmostBC</var> in <var>top-level browsing contexts</var>:</p>
      <ol>
       <li data-md>
        <p>Add <var>topmostBC</var>’s Window’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-realm" id="ref-for-concept-relevant-realm">relevant Realm</a> to <var>destinationRealms</var>.</p>
       <li data-md>
        <p>Let <var>descendantBCs</var> be <var>topmostBC</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#active-document" id="ref-for-active-document">active document</a>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/#list-of-the-descendant-browsing-contexts" id="ref-for-list-of-the-descendant-browsing-contexts②">list of the descendant browsing contexts</a>.</p>
       <li data-md>
        <p>For each <var>descendantBC</var> in <var>descendantBCs</var>, add <var>descendantBC</var>’s Window’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-realm" id="ref-for-concept-relevant-realm①">relevant Realm</a> to <var>destinationRealms</var>.</p>
      </ol>
     <li data-md>
      <p>For each <var>destinationRealm</var> in <var>destinationRealms</var>:</p>
      <ol>
       <li data-md>
        <p>Let <var>name</var> be the empty string. This will be used to report <a data-link-type="dfn" href="#minimal-culprit-attribution" id="ref-for-minimal-culprit-attribution">minimal culprit attribution</a>, below.</p>
       <li data-md>
        <p>Let <var>culpritSettings</var> be <code class="highlight"><c- kc>null</c-></code>.</p>
       <li data-md>
        <p>If the <var>task</var> argument was not provided, set <var>name</var> to "<code class="highlight"><a data-link-type="dfn" href="#unknown" id="ref-for-unknown①">unknown</a></code>".</p>
       <li data-md>
        <p>Otherwise: process <var>task</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/#script-evaluation-environment-settings-object-set" id="ref-for-script-evaluation-environment-settings-object-set">script evaluation environment settings object set</a> to determine <var>name</var> and <var>culpritSettings</var> as follows:</p>
        <ol>
         <li data-md>
          <p>If <var>task</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/#script-evaluation-environment-settings-object-set" id="ref-for-script-evaluation-environment-settings-object-set①">script evaluation environment settings object set</a> is empty: set <var>name</var> to "<code class="highlight"><a data-link-type="dfn" href="#unknown" id="ref-for-unknown②">unknown</a></code>" and <var>culpritSettings</var> to <code class="highlight"><c- kc>null</c-></code>.</p>
         <li data-md>
          <p>If <var>task</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/#script-evaluation-environment-settings-object-set" id="ref-for-script-evaluation-environment-settings-object-set②">script evaluation environment settings object set</a>’s length is greater than one: set <var>name</var> to "<code class="highlight"><a data-link-type="dfn" href="#multiple-contexts" id="ref-for-multiple-contexts①">multiple<c- o>-</c->contexts</a></code>" and <var>culpritSettings</var> to <code class="highlight"><c- kc>null</c-></code>.</p>
         <li data-md>
          <p>If <var>task</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/#script-evaluation-environment-settings-object-set" id="ref-for-script-evaluation-environment-settings-object-set③">script evaluation environment settings object set</a>’s length is one:</p>
          <ol>
           <li data-md>
            <p>Set <var>culpritSettings</var> to the single item in <var>task</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/#script-evaluation-environment-settings-object-set" id="ref-for-script-evaluation-environment-settings-object-set④">script evaluation environment settings object set</a>.</p>
           <li data-md>
            <p>Let <var>destinationSettings</var> be <var>destinationRealm</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#relevant-settings-object" id="ref-for-relevant-settings-object">relevant settings object</a>.</p>
           <li data-md>
            <p>Let <var>destinationOrigin</var> be <var>destinationSettings</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-settings-object-origin" id="ref-for-concept-settings-object-origin">origin</a>.</p>
           <li data-md>
            <p>Let <var>destinationBC</var> be <var>destinationSettings</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#responsible-browsing-context" id="ref-for-responsible-browsing-context">responsible browsing context</a>.</p>
           <li data-md>
            <p>If <var>culpritSettings</var> is the same as <var>destinationSettings</var>, set <var>name</var> to "<code class="highlight"><a data-link-type="dfn" href="#self" id="ref-for-self①">self</a></code>".</p>
           <li data-md>
            <p>If <var>culpritSettings</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-settings-object-origin" id="ref-for-concept-settings-object-origin①">origin</a> and <var>destinationOrigin</var> are <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/origin.html#same-origin" id="ref-for-same-origin④">same origin</a>:</p>
            <ol>
             <li data-md>
              <p>If <var>culpritSettings</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#responsible-browsing-context" id="ref-for-responsible-browsing-context①">responsible browsing context</a> is an <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/#ancestor-browsing-context" id="ref-for-ancestor-browsing-context②">ancestor</a> of <var>destinationBC</var>, set <var>name</var> to "<code class="highlight"><a data-link-type="dfn" href="#same-origin-ancestor" id="ref-for-same-origin-ancestor①">same<c- o>-</c->origin<c- o>-</c->ancestor</a></code>".</p>
             <li data-md>
              <p>Otherwise, if <var>culpritSettings</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#responsible-browsing-context" id="ref-for-responsible-browsing-context②">responsible browsing context</a> is a <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/#list-of-the-descendant-browsing-contexts" id="ref-for-list-of-the-descendant-browsing-contexts③">descendant</a> of <var>destinationBC</var>, set <var>name</var> to "<code class="highlight"><a data-link-type="dfn" href="#same-origin-descendant" id="ref-for-same-origin-descendant①">same<c- o>-</c->origin<c- o>-</c->descendant</a></code>".</p>
             <li data-md>
              <p>Otherwise, set <var>name</var> to "<code class="highlight"><a data-link-type="dfn" href="#same-origin" id="ref-for-same-origin⑤">same<c- o>-</c->origin</a></code>".</p>
            </ol>
           <li data-md>
            <p>Otherwise:</p>
            <ol>
             <li data-md>
              <p>If <var>culpritSettings</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#responsible-browsing-context" id="ref-for-responsible-browsing-context③">responsible browsing context</a> is an <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/#ancestor-browsing-context" id="ref-for-ancestor-browsing-context③">ancestor</a> of <var>destinationBC</var>, set <var>name</var> to "<code class="highlight"><a data-link-type="dfn" href="#cross-origin-ancestor" id="ref-for-cross-origin-ancestor①">cross<c- o>-</c->origin<c- o>-</c->ancestor</a></code>" and set <var>culpritSettings</var> to <code class="highlight"><c- kc>null</c-></code>.</p>
              <p class="note" role="note"><span>NOTE:</span> this is not reported because of security. Developers should look this up themselves.</p>
             <li data-md>
              <p>Otherwise, if <var>culpritSettings</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#responsible-browsing-context" id="ref-for-responsible-browsing-context④">responsible browsing context</a> is a <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/#list-of-the-descendant-browsing-contexts" id="ref-for-list-of-the-descendant-browsing-contexts④">descendant</a> of <var>destinationBC</var>, set <var>name</var> to "<code class="highlight"><a data-link-type="dfn" href="#cross-origin-descendant" id="ref-for-cross-origin-descendant①">cross<c- o>-</c->origin<c- o>-</c->descendant</a></code>".</p>
             <li data-md>
              <p>Otherwise, set <var>name</var> to "<code class="highlight"><a data-link-type="dfn" href="#cross-origin-unreachable" id="ref-for-cross-origin-unreachable①">cross<c- o>-</c->origin<c- o>-</c->unreachable</a></code>".</p>
            </ol>
          </ol>
        </ol>
       <li data-md>
        <p>If <var>task</var> was not provided, let <var>attribution</var> be <code class="highlight"><c- kc>null</c-></code>.</p>
       <li data-md>
        <p>Otherwise, let <var>attribution</var> be a new <code class="idl"><a data-link-type="idl" href="#taskattributiontiming" id="ref-for-taskattributiontiming⑤">TaskAttributionTiming</a></code> object and set its attributes as follows:</p>
        <ol>
         <li data-md>
          <p>Set <var>attribution</var>’s <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#dom-performanceentry-name" id="ref-for-dom-performanceentry-name⑤">name</a></code> attribute to "<code class="highlight"><a data-link-type="dfn" href="#unknown" id="ref-for-unknown③">unknown</a></code>".</p>
          <p class="note" role="note"><span>NOTE:</span> future iterations of this API will add more values to the <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#dom-performanceentry-name" id="ref-for-dom-performanceentry-name⑥">name</a></code> attribute of a <code class="idl"><a data-link-type="idl" href="#taskattributiontiming" id="ref-for-taskattributiontiming⑥">TaskAttributionTiming</a></code> object, but for now it can only be a single value.</p>
         <li data-md>
          <p>Set <var>attribution</var>’s <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#dom-performanceentry-entrytype" id="ref-for-dom-performanceentry-entrytype②">entryType</a></code> attribute to <code class="highlight"><c- u>"taskattribution"</c-></code>.</p>
         <li data-md>
          <p>Set <var>attribution</var>’s <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#dom-performanceentry-starttime" id="ref-for-dom-performanceentry-starttime②">startTime</a></code> and <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#dom-performanceentry-duration" id="ref-for-dom-performanceentry-duration②">duration</a></code> to 0.</p>
         <li data-md>
          <p>Set <var>attribution</var>’s <code class="idl"><a data-link-type="idl" href="#dom-taskattributiontiming-containertype" id="ref-for-dom-taskattributiontiming-containertype①">containerType</a></code> attribute to <code class="highlight"><c- u>"window"</c-></code>.</p>
         <li data-md>
          <p>Set <var>attribution</var>’s <code class="idl"><a data-link-type="idl" href="#dom-taskattributiontiming-containername" id="ref-for-dom-taskattributiontiming-containername①">containerName</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-taskattributiontiming-containersrc" id="ref-for-dom-taskattributiontiming-containersrc①">containerSrc</a></code> attributes to the empty string.</p>
         <li data-md>
          <p>If <var>culpritSettings</var> is not <code class="highlight"><c- kc>null</c-></code>:</p>
          <ol>
           <li data-md>
            <p>Let <var>container</var> be <var>culpritSettings</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#responsible-browsing-context" id="ref-for-responsible-browsing-context⑤">responsible browsing context</a>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#browsing-context-container" id="ref-for-browsing-context-container①">browsing context container</a>.</p>
           <li data-md>
            <p class="assertion">Assert: <var>container</var> is not <code class="highlight"><c- kc>null</c-></code>.</p>
           <li data-md>
            <p>Set <var>attribution</var>’s <code class="idl"><a data-link-type="idl" href="#dom-taskattributiontiming-containerid" id="ref-for-dom-taskattributiontiming-containerid①">containerId</a></code> attribute to the value of <var>container</var>’s <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-id" id="ref-for-concept-id">ID</a>, or the empty string if the ID is unset.</p>
           <li data-md>
            <p>If <var>container</var> is an <code class="highlight"><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-iframe-element" id="ref-for-the-iframe-element①">iframe</a></code> element:</p>
            <ol>
             <li data-md>
              <p>Set <var>attribution</var>’s <code class="idl"><a data-link-type="idl" href="#dom-taskattributiontiming-containertype" id="ref-for-dom-taskattributiontiming-containertype②">containerType</a></code> attribute to "<code class="highlight">iframe</code>".</p>
             <li data-md>
              <p>Set <var>attribution</var>’s <code class="idl"><a data-link-type="idl" href="#dom-taskattributiontiming-containername" id="ref-for-dom-taskattributiontiming-containername②">containerName</a></code> attribute to the value of <var>container</var>’s <code class="highlight"><a data-link-type="element-sub" href="https://html.spec.whatwg.org/multipage/iframe-embed-object.html#attr-iframe-name" id="ref-for-attr-iframe-name">name</a></code> content attribute, or the empty string if the attribute is absent.</p>
             <li data-md>
              <p>Set <var>attribution</var>’s <code class="idl"><a data-link-type="idl" href="#dom-taskattributiontiming-containersrc" id="ref-for-dom-taskattributiontiming-containersrc②">containerSrc</a></code> attribute to the value of <var>container</var>’s <code class="highlight"><a data-link-type="element-sub" href="https://html.spec.whatwg.org/multipage/iframe-embed-object.html#attr-iframe-src" id="ref-for-attr-iframe-src">src</a></code> content attribute, or the empty string if the attribute is absent.</p>
            </ol>
            <p class="note" role="note"><span>NOTE:</span> it is intentional that we record the frame’s <code class="highlight"><a data-link-type="element-sub" href="https://html.spec.whatwg.org/multipage/iframe-embed-object.html#attr-iframe-src" id="ref-for-attr-iframe-src①">src</a></code> attribute here, and not its current URL, as this is meant primarily to help identify frames, and allowing discovery of the current URL of a cross-origin iframe is a security problem.</p>
           <li data-md>
            <p>If <var>container</var> is a <code class="highlight"><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/obsolete.html#frame" id="ref-for-frame">frame</a></code> element:</p>
            <ol>
             <li data-md>
              <p>Set <var>attribution</var>’s <code class="idl"><a data-link-type="idl" href="#dom-taskattributiontiming-containertype" id="ref-for-dom-taskattributiontiming-containertype③">containerType</a></code> attribute to "<code class="highlight">frame</code>".</p>
             <li data-md>
              <p>Set <var>attribution</var>’s <code class="idl"><a data-link-type="idl" href="#dom-taskattributiontiming-containername" id="ref-for-dom-taskattributiontiming-containername③">containerName</a></code> attribute to the value of <var>container</var>’s <code class="highlight">name</code> content attribute, or the empty string if the attribute is absent.</p>
             <li data-md>
              <p>Set <var>attribution</var>’s <code class="idl"><a data-link-type="idl" href="#dom-taskattributiontiming-containersrc" id="ref-for-dom-taskattributiontiming-containersrc③">containerSrc</a></code> attribute to the value of <var>container</var>’s <code class="highlight">src</code> content attribute, or the empty string if the attribute is absent.</p>
            </ol>
           <li data-md>
            <p>If <var>container</var> is an <code class="highlight"><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-object-element" id="ref-for-the-object-element①">object</a></code> element:</p>
            <ol>
             <li data-md>
              <p>Set <var>attribution</var>’s <code class="idl"><a data-link-type="idl" href="#dom-taskattributiontiming-containertype" id="ref-for-dom-taskattributiontiming-containertype④">containerType</a></code> attribute to "<code class="highlight">object</code>".</p>
             <li data-md>
              <p>Set <var>attribution</var>’s <code class="idl"><a data-link-type="idl" href="#dom-taskattributiontiming-containername" id="ref-for-dom-taskattributiontiming-containername④">containerName</a></code> attribute to the value of <var>container</var>’s <code class="highlight"><a data-link-type="element-sub" href="https://html.spec.whatwg.org/multipage/iframe-embed-object.html#attr-object-name" id="ref-for-attr-object-name">name</a></code> content attribute, or the empty string if the attribute is absent.</p>
             <li data-md>
              <p>Set <var>attribution</var>’s <code class="idl"><a data-link-type="idl" href="#dom-taskattributiontiming-containersrc" id="ref-for-dom-taskattributiontiming-containersrc④">containerSrc</a></code> attribute to the value of <var>container</var>’s <code class="highlight"><a data-link-type="element-sub" href="https://html.spec.whatwg.org/multipage/iframe-embed-object.html#attr-object-data" id="ref-for-attr-object-data">data</a></code> content attribute, or the empty string if the attribute is absent.</p>
            </ol>
           <li data-md>
            <p>If <var>container</var> is an <code class="highlight"><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-embed-element" id="ref-for-the-embed-element">embed</a></code> element:</p>
            <ol>
             <li data-md>
              <p>Set <var>attribution</var>’s <code class="idl"><a data-link-type="idl" href="#dom-taskattributiontiming-containertype" id="ref-for-dom-taskattributiontiming-containertype⑤">containerType</a></code> attribute to "<code class="highlight">embed</code>".</p>
             <li data-md>
              <p>Set <var>attribution</var>’s <code class="idl"><a data-link-type="idl" href="#dom-taskattributiontiming-containername" id="ref-for-dom-taskattributiontiming-containername⑤">containerName</a></code> attribute to the empty string.</p>
             <li data-md>
              <p>Set <var>attribution</var>’s <code class="idl"><a data-link-type="idl" href="#dom-taskattributiontiming-containersrc" id="ref-for-dom-taskattributiontiming-containersrc⑤">containerSrc</a></code> attribute to the value of <var>container</var>’s <code class="highlight"><a data-link-type="element-sub" href="https://html.spec.whatwg.org/multipage/iframe-embed-object.html#attr-embed-src" id="ref-for-attr-embed-src">src</a></code> content attribute, or the empty string if the attribute is absent.</p>
            </ol>
          </ol>
        </ol>
       <li data-md>
        <p>Create a new <code class="idl"><a data-link-type="idl" href="#performancelongtasktiming" id="ref-for-performancelongtasktiming④">PerformanceLongTaskTiming</a></code> object <var>newEntry</var> and set its attributes as follows:</p>
        <ol>
         <li data-md>
          <p>Set <var>newEntry</var>’s <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#dom-performanceentry-name" id="ref-for-dom-performanceentry-name⑦">name</a></code> attribute to <var>name</var>.</p>
         <li data-md>
          <p>Set <var>newEntry</var>’s <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#dom-performanceentry-entrytype" id="ref-for-dom-performanceentry-entrytype③">entryType</a></code> attribute to "<code class="highlight">longtask</code>".</p>
         <li data-md>
          <p>Set <var>newEntry</var>’s <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#dom-performanceentry-starttime" id="ref-for-dom-performanceentry-starttime③">startTime</a></code> attribute to <var>start time</var>.</p>
         <li data-md>
          <p>Set <var>newEntry</var>’s <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#dom-performanceentry-starttime" id="ref-for-dom-performanceentry-starttime④">startTime</a></code> attribute to <var>end time</var> minus <var>start time</var>.</p>
         <li data-md>
          <p>If <var>attribution</var> is not <code class="highlight"><c- kc>null</c-></code>, set <var>newEntry</var>’s <code class="idl"><a data-link-type="idl" href="#dom-performancelongtasktiming-attribution" id="ref-for-dom-performancelongtasktiming-attribution④">attribution</a></code> attribute to a new frozen array containing the single value <var>attribution</var>.</p>
          <p class="note" role="note"><span>NOTE:</span> future iterations of this API will add more values to the <code class="idl"><a data-link-type="idl" href="#dom-performancelongtasktiming-attribution" id="ref-for-dom-performancelongtasktiming-attribution⑤">attribution</a></code> attribute, but for now it only contains a single value.</p>
        </ol>
       <li data-md>
        <p><a data-link-type="dfn" href="https://w3c.github.io/performance-timeline/#dfn-queue-a-performanceentry" id="ref-for-dfn-queue-a-performanceentry">Queue the PerformanceEntry</a> <var>newEntry</var> on <var>destinationRealm</var>.</p>
      </ol>
    </ol>
   </div>
   <h2 class="heading settled" data-level="5" id="priv-sec"><span class="secno">5. </span><span class="content">Security &amp; privacy considerations</span><a class="self-link" href="#priv-sec"></a></h2>
   <p>Long Tasks API adheres to the same-origin policy by including origin-safe attribution information about the source of the long task.
There is a 50ms threshold for long tasks. Together this provides adequate protection against security attacks against browser.</p>
   <p>However, privacy related attacks are possible, while the API doesn’t introduce any new privacy attacks, it could make existing privacy attacks faster. Mitigations for this are possible and discussed in the security review <a href="https://docs.google.com/document/d/1tIMI1gau_q6X5EBnjDNiFS5NWV9cpYJ5KKA7xPd3VB8/edit">in this document</a>.</p>
  </main>
<script src="https://www.w3.org/scripts/TR/2016/fixup.js"></script>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#dom-performancelongtasktiming-attribution">attribution</a><span>, in §3.1</span>
   <li><a href="#attribution">Attribution</a><span>, in §2</span>
   <li><a href="#dom-taskattributiontiming-containerid">containerId</a><span>, in §3.2</span>
   <li><a href="#dom-taskattributiontiming-containername">containerName</a><span>, in §3.2</span>
   <li><a href="#dom-taskattributiontiming-containersrc">containerSrc</a><span>, in §3.2</span>
   <li><a href="#dom-taskattributiontiming-containertype">containerType</a><span>, in §3.2</span>
   <li><a href="#cross-origin-ancestor">cross-origin-ancestor</a><span>, in §3.1</span>
   <li><a href="#cross-origin-descendant">cross-origin-descendant</a><span>, in §3.1</span>
   <li><a href="#cross-origin-unreachable">cross-origin-unreachable</a><span>, in §3.1</span>
   <li><a href="#culprit-browsing-context-container">Culprit browsing context container</a><span>, in §2</span>
   <li><a href="#long-task">Long task</a><span>, in §2</span>
   <li><a href="#minimal-culprit-attribution">minimal culprit attribution</a><span>, in §3.3</span>
   <li><a href="#multiple-contexts">multiple-contexts</a><span>, in §3.1</span>
   <li><a href="#performancelongtasktiming">PerformanceLongTaskTiming</a><span>, in §3.1</span>
   <li><a href="#same-origin">same-origin</a><span>, in §3.1</span>
   <li><a href="#same-origin-ancestor">same-origin-ancestor</a><span>, in §3.1</span>
   <li><a href="#same-origin-descendant">same-origin-descendant</a><span>, in §3.1</span>
   <li><a href="#self">self</a><span>, in §3.1</span>
   <li><a href="#taskattributiontiming">TaskAttributionTiming</a><span>, in §3.2</span>
   <li>
    toJSON()
    <ul>
     <li><a href="#dom-performancelongtasktiming-tojson">method for PerformanceLongTaskTiming</a><span>, in §3.1</span>
     <li><a href="#dom-taskattributiontiming-tojson">method for TaskAttributionTiming</a><span>, in §3.2</span>
    </ul>
   <li><a href="#unknown">unknown</a><span>, in §3.1</span>
  </ul>
  <aside class="dfn-panel" data-for="term-for-concept-id">
   <a href="https://dom.spec.whatwg.org/#concept-id">https://dom.spec.whatwg.org/#concept-id</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-id">4.1. Report long tasks</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-sec-code-realms">
   <a href="https://tc39.github.io/ecma262/#sec-code-realms">https://tc39.github.io/ecma262/#sec-code-realms</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-sec-code-realms">4.1. Report long tasks</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-def-domhighrestimestamp">
   <a href="https://w3c.github.io/hr-time/#idl-def-domhighrestimestamp">https://w3c.github.io/hr-time/#idl-def-domhighrestimestamp</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-def-domhighrestimestamp">3.1. PerformanceLongTaskTiming interface</a> <a href="#ref-for-idl-def-domhighrestimestamp①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-window">
   <a href="https://html.spec.whatwg.org/multipage/window-object.html#window">https://html.spec.whatwg.org/multipage/window-object.html#window</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-window">4. Processing model</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-active-document">
   <a href="https://html.spec.whatwg.org/multipage/browsers.html#active-document">https://html.spec.whatwg.org/multipage/browsers.html#active-document</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-active-document">4.1. Report long tasks</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-integration-with-the-javascript-agent-cluster-formalism">
   <a href="https://html.spec.whatwg.org/multipage/#integration-with-the-javascript-agent-cluster-formalism">https://html.spec.whatwg.org/multipage/#integration-with-the-javascript-agent-cluster-formalism</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-integration-with-the-javascript-agent-cluster-formalism">3.3. Pointing to the culprit</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-ancestor-browsing-context">
   <a href="https://html.spec.whatwg.org/multipage/#ancestor-browsing-context">https://html.spec.whatwg.org/multipage/#ancestor-browsing-context</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-ancestor-browsing-context②">4.1. Report long tasks</a> <a href="#ref-for-ancestor-browsing-context③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-ancestor-browsing-context">
   <a href="https://html.spec.whatwg.org/multipage/browsers.html#ancestor-browsing-context">https://html.spec.whatwg.org/multipage/browsers.html#ancestor-browsing-context</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-ancestor-browsing-context">3.1. PerformanceLongTaskTiming interface</a> <a href="#ref-for-ancestor-browsing-context①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-browsing-context">
   <a href="https://html.spec.whatwg.org/multipage/browsers.html#browsing-context">https://html.spec.whatwg.org/multipage/browsers.html#browsing-context</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-browsing-context">3.1. PerformanceLongTaskTiming interface</a> <a href="#ref-for-browsing-context①">(2)</a> <a href="#ref-for-browsing-context②">(3)</a> <a href="#ref-for-browsing-context③">(4)</a>
    <li><a href="#ref-for-browsing-context④">3.3. Pointing to the culprit</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-browsing-context-container">
   <a href="https://html.spec.whatwg.org/multipage/browsers.html#browsing-context-container">https://html.spec.whatwg.org/multipage/browsers.html#browsing-context-container</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-browsing-context-container">2. Terminology</a>
    <li><a href="#ref-for-browsing-context-container①">4.1. Report long tasks</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-attr-object-data">
   <a href="https://html.spec.whatwg.org/multipage/iframe-embed-object.html#attr-object-data">https://html.spec.whatwg.org/multipage/iframe-embed-object.html#attr-object-data</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-attr-object-data">4.1. Report long tasks</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-embed-element">
   <a href="https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-embed-element">https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-embed-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-embed-element">4.1. Report long tasks</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-event-loop">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#event-loop">https://html.spec.whatwg.org/multipage/webappapis.html#event-loop</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-event-loop">2. Terminology</a>
    <li><a href="#ref-for-event-loop①">3.1. PerformanceLongTaskTiming interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-event-loop-processing-model">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model">https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-event-loop-processing-model">2. Terminology</a> <a href="#ref-for-event-loop-processing-model①">(2)</a>
    <li><a href="#ref-for-event-loop-processing-model②">3.1. PerformanceLongTaskTiming interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-frame">
   <a href="https://html.spec.whatwg.org/multipage/obsolete.html#frame">https://html.spec.whatwg.org/multipage/obsolete.html#frame</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-frame">4.1. Report long tasks</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-iframe-element">
   <a href="https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-iframe-element">https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-iframe-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-iframe-element">2. Terminology</a>
    <li><a href="#ref-for-the-iframe-element①">4.1. Report long tasks</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-list-of-the-descendant-browsing-contexts">
   <a href="https://html.spec.whatwg.org/multipage/#list-of-the-descendant-browsing-contexts">https://html.spec.whatwg.org/multipage/#list-of-the-descendant-browsing-contexts</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-list-of-the-descendant-browsing-contexts">3.1. PerformanceLongTaskTiming interface</a> <a href="#ref-for-list-of-the-descendant-browsing-contexts①">(2)</a>
    <li><a href="#ref-for-list-of-the-descendant-browsing-contexts②">4.1. Report long tasks</a> <a href="#ref-for-list-of-the-descendant-browsing-contexts③">(2)</a> <a href="#ref-for-list-of-the-descendant-browsing-contexts④">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-microtask">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#microtask">https://html.spec.whatwg.org/multipage/webappapis.html#microtask</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-microtask">2. Terminology</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-attr-object-name">
   <a href="https://html.spec.whatwg.org/multipage/iframe-embed-object.html#attr-object-name">https://html.spec.whatwg.org/multipage/iframe-embed-object.html#attr-object-name</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-attr-object-name">4.1. Report long tasks</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-object-element">
   <a href="https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-object-element">https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-object-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-object-element">2. Terminology</a>
    <li><a href="#ref-for-the-object-element①">4.1. Report long tasks</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-settings-object-origin">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-settings-object-origin">https://html.spec.whatwg.org/multipage/webappapis.html#concept-settings-object-origin</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-settings-object-origin">4.1. Report long tasks</a> <a href="#ref-for-concept-settings-object-origin①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-perform-a-microtask-checkpoint">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#perform-a-microtask-checkpoint">https://html.spec.whatwg.org/multipage/webappapis.html#perform-a-microtask-checkpoint</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-perform-a-microtask-checkpoint">2. Terminology</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-relevant-realm">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-realm">https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-realm</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-relevant-realm">4.1. Report long tasks</a> <a href="#ref-for-concept-relevant-realm①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-relevant-settings-object">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#relevant-settings-object">https://html.spec.whatwg.org/multipage/webappapis.html#relevant-settings-object</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-relevant-settings-object">4.1. Report long tasks</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-responsible-browsing-context">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#responsible-browsing-context">https://html.spec.whatwg.org/multipage/webappapis.html#responsible-browsing-context</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-responsible-browsing-context">4.1. Report long tasks</a> <a href="#ref-for-responsible-browsing-context①">(2)</a> <a href="#ref-for-responsible-browsing-context②">(3)</a> <a href="#ref-for-responsible-browsing-context③">(4)</a> <a href="#ref-for-responsible-browsing-context④">(5)</a> <a href="#ref-for-responsible-browsing-context⑤">(6)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-same-origin">
   <a href="https://html.spec.whatwg.org/multipage/origin.html#same-origin">https://html.spec.whatwg.org/multipage/origin.html#same-origin</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-same-origin">3.1. PerformanceLongTaskTiming interface</a> <a href="#ref-for-same-origin①">(2)</a> <a href="#ref-for-same-origin②">(3)</a>
    <li><a href="#ref-for-same-origin④">4.1. Report long tasks</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-script-evaluation-environment-settings-object-set">
   <a href="https://html.spec.whatwg.org/multipage/#script-evaluation-environment-settings-object-set">https://html.spec.whatwg.org/multipage/#script-evaluation-environment-settings-object-set</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-script-evaluation-environment-settings-object-set">4.1. Report long tasks</a> <a href="#ref-for-script-evaluation-environment-settings-object-set①">(2)</a> <a href="#ref-for-script-evaluation-environment-settings-object-set②">(3)</a> <a href="#ref-for-script-evaluation-environment-settings-object-set③">(4)</a> <a href="#ref-for-script-evaluation-environment-settings-object-set④">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-attr-iframe-src">
   <a href="https://html.spec.whatwg.org/multipage/iframe-embed-object.html#attr-iframe-src">https://html.spec.whatwg.org/multipage/iframe-embed-object.html#attr-iframe-src</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-attr-iframe-src">4.1. Report long tasks</a> <a href="#ref-for-attr-iframe-src①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-task">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-task">https://html.spec.whatwg.org/multipage/webappapis.html#concept-task</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-task">2. Terminology</a> <a href="#ref-for-concept-task①">(2)</a>
    <li><a href="#ref-for-concept-task②">3.1. PerformanceLongTaskTiming interface</a> <a href="#ref-for-concept-task③">(2)</a> <a href="#ref-for-concept-task④">(3)</a> <a href="#ref-for-concept-task⑤">(4)</a> <a href="#ref-for-concept-task⑥">(5)</a> <a href="#ref-for-concept-task⑦">(6)</a> <a href="#ref-for-concept-task⑧">(7)</a> <a href="#ref-for-concept-task⑨">(8)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-top-level-browsing-context">
   <a href="https://html.spec.whatwg.org/multipage/browsers.html#top-level-browsing-context">https://html.spec.whatwg.org/multipage/browsers.html#top-level-browsing-context</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-top-level-browsing-context">4.1. Report long tasks</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-unit-of-related-browsing-contexts">
   <a href="https://html.spec.whatwg.org/multipage/#unit-of-related-browsing-contexts">https://html.spec.whatwg.org/multipage/#unit-of-related-browsing-contexts</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-unit-of-related-browsing-contexts">3.3. Pointing to the culprit</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-update-the-rendering">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#update-the-rendering">https://html.spec.whatwg.org/multipage/webappapis.html#update-the-rendering</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-update-the-rendering">2. Terminology</a>
    <li><a href="#ref-for-update-the-rendering①">3.1. PerformanceLongTaskTiming interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-performanceentry-interface">
   <a href="https://w3c.github.io/performance-timeline/#the-performanceentry-interface">https://w3c.github.io/performance-timeline/#the-performanceentry-interface</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-performanceentry-interface">3.1. PerformanceLongTaskTiming interface</a>
    <li><a href="#ref-for-the-performanceentry-interface①">3.2. TaskAttributionTiming interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-performanceentry-duration">
   <a href="https://w3c.github.io/performance-timeline/#dom-performanceentry-duration">https://w3c.github.io/performance-timeline/#dom-performanceentry-duration</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-performanceentry-duration">3.1. PerformanceLongTaskTiming interface</a>
    <li><a href="#ref-for-dom-performanceentry-duration①">3.2. TaskAttributionTiming interface</a>
    <li><a href="#ref-for-dom-performanceentry-duration②">4.1. Report long tasks</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-performanceentry-entrytype">
   <a href="https://w3c.github.io/performance-timeline/#dom-performanceentry-entrytype">https://w3c.github.io/performance-timeline/#dom-performanceentry-entrytype</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-performanceentry-entrytype">3.1. PerformanceLongTaskTiming interface</a>
    <li><a href="#ref-for-dom-performanceentry-entrytype①">3.2. TaskAttributionTiming interface</a>
    <li><a href="#ref-for-dom-performanceentry-entrytype②">4.1. Report long tasks</a> <a href="#ref-for-dom-performanceentry-entrytype③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-performanceentry-name">
   <a href="https://w3c.github.io/performance-timeline/#dom-performanceentry-name">https://w3c.github.io/performance-timeline/#dom-performanceentry-name</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-performanceentry-name">3.1. PerformanceLongTaskTiming interface</a>
    <li><a href="#ref-for-dom-performanceentry-name①">3.2. TaskAttributionTiming interface</a>
    <li><a href="#ref-for-dom-performanceentry-name②">3.3. Pointing to the culprit</a> <a href="#ref-for-dom-performanceentry-name③">(2)</a> <a href="#ref-for-dom-performanceentry-name④">(3)</a>
    <li><a href="#ref-for-dom-performanceentry-name⑤">4.1. Report long tasks</a> <a href="#ref-for-dom-performanceentry-name⑥">(2)</a> <a href="#ref-for-dom-performanceentry-name⑦">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dfn-queue-a-performanceentry">
   <a href="https://w3c.github.io/performance-timeline/#dfn-queue-a-performanceentry">https://w3c.github.io/performance-timeline/#dfn-queue-a-performanceentry</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dfn-queue-a-performanceentry">4.1. Report long tasks</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-performanceentry-starttime">
   <a href="https://w3c.github.io/performance-timeline/#dom-performanceentry-starttime">https://w3c.github.io/performance-timeline/#dom-performanceentry-starttime</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-performanceentry-starttime">3.1. PerformanceLongTaskTiming interface</a>
    <li><a href="#ref-for-dom-performanceentry-starttime①">3.2. TaskAttributionTiming interface</a>
    <li><a href="#ref-for-dom-performanceentry-starttime②">4.1. Report long tasks</a> <a href="#ref-for-dom-performanceentry-starttime③">(2)</a> <a href="#ref-for-dom-performanceentry-starttime④">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-supportedentrytypes-attribute">
   <a href="https://w3c.github.io/performance-timeline/#supportedentrytypes-attribute">https://w3c.github.io/performance-timeline/#supportedentrytypes-attribute</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-supportedentrytypes-attribute">4. Processing model</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-DOMString">
   <a href="https://heycam.github.io/webidl/#idl-DOMString">https://heycam.github.io/webidl/#idl-DOMString</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-DOMString">3.2. TaskAttributionTiming interface</a> <a href="#ref-for-idl-DOMString①">(2)</a> <a href="#ref-for-idl-DOMString②">(3)</a> <a href="#ref-for-idl-DOMString③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-Default">
   <a href="https://heycam.github.io/webidl/#Default">https://heycam.github.io/webidl/#Default</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-Default">3.1. PerformanceLongTaskTiming interface</a>
    <li><a href="#ref-for-Default①">3.2. TaskAttributionTiming interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-Exposed">
   <a href="https://heycam.github.io/webidl/#Exposed">https://heycam.github.io/webidl/#Exposed</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-Exposed">3.1. PerformanceLongTaskTiming interface</a>
    <li><a href="#ref-for-Exposed①">3.2. TaskAttributionTiming interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-object">
   <a href="https://heycam.github.io/webidl/#idl-object">https://heycam.github.io/webidl/#idl-object</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-object">3.1. PerformanceLongTaskTiming interface</a>
    <li><a href="#ref-for-idl-object①">3.2. TaskAttributionTiming interface</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[DOM]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-concept-id" style="color:initial">id</span>
    </ul>
   <li>
    <a data-link-type="biblio">[ECMASCRIPT]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-sec-code-realms" style="color:initial">javascript realms</span>
    </ul>
   <li>
    <a data-link-type="biblio">[hr-time-2]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-idl-def-domhighrestimestamp" style="color:initial">DOMHighResTimeStamp</span>
    </ul>
   <li>
    <a data-link-type="biblio">[HTML]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-window" style="color:initial">Window</span>
     <li><span class="dfn-paneled" id="term-for-active-document" style="color:initial">active document</span>
     <li><span class="dfn-paneled" id="term-for-integration-with-the-javascript-agent-cluster-formalism" style="color:initial">agent cluster</span>
     <li><span class="dfn-paneled" id="term-for-ancestor-browsing-context" style="color:initial">ancestor</span>
     <li><span class="dfn-paneled" id="term-for-ancestor-browsing-context①" style="color:initial">ancestor browsing context</span>
     <li><span class="dfn-paneled" id="term-for-browsing-context" style="color:initial">browsing context</span>
     <li><span class="dfn-paneled" id="term-for-browsing-context-container" style="color:initial">browsing context container</span>
     <li><span class="dfn-paneled" id="term-for-attr-object-data" style="color:initial">data</span>
     <li><span class="dfn-paneled" id="term-for-the-embed-element" style="color:initial">embed</span>
     <li><span class="dfn-paneled" id="term-for-event-loop" style="color:initial">event loop</span>
     <li><span class="dfn-paneled" id="term-for-event-loop-processing-model" style="color:initial">event loop processing model</span>
     <li><span class="dfn-paneled" id="term-for-frame" style="color:initial">frame</span>
     <li><span class="dfn-paneled" id="term-for-the-iframe-element" style="color:initial">iframe</span>
     <li><span class="dfn-paneled" id="term-for-list-of-the-descendant-browsing-contexts" style="color:initial">list of the descendant browsing contexts</span>
     <li><span class="dfn-paneled" id="term-for-microtask" style="color:initial">microtask</span>
     <li><span class="dfn-paneled" id="term-for-attr-object-name" style="color:initial">name <small>(for object)</small></span>
     <li><span class="dfn-paneled" id="term-for-the-object-element" style="color:initial">object</span>
     <li><span class="dfn-paneled" id="term-for-concept-settings-object-origin" style="color:initial">origin</span>
     <li><span class="dfn-paneled" id="term-for-perform-a-microtask-checkpoint" style="color:initial">perform a microtask checkpoint</span>
     <li><span class="dfn-paneled" id="term-for-concept-relevant-realm" style="color:initial">relevant realm</span>
     <li><span class="dfn-paneled" id="term-for-relevant-settings-object" style="color:initial">relevant settings object</span>
     <li><span class="dfn-paneled" id="term-for-responsible-browsing-context" style="color:initial">responsible browsing context</span>
     <li><span class="dfn-paneled" id="term-for-same-origin" style="color:initial">same origin</span>
     <li><span class="dfn-paneled" id="term-for-script-evaluation-environment-settings-object-set" style="color:initial">script evaluation environment settings object set</span>
     <li><span class="dfn-paneled" id="term-for-attr-iframe-src" style="color:initial">src <small>(for iframe)</small></span>
     <li><span class="dfn-paneled" id="term-for-concept-task" style="color:initial">task</span>
     <li><span class="dfn-paneled" id="term-for-top-level-browsing-context" style="color:initial">top-level browsing context</span>
     <li><span class="dfn-paneled" id="term-for-unit-of-related-browsing-contexts" style="color:initial">unit of related browsing contexts</span>
     <li><span class="dfn-paneled" id="term-for-update-the-rendering" style="color:initial">update the rendering</span>
    </ul>
   <li>
    <a data-link-type="biblio">[performance-timeline-2]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-the-performanceentry-interface" style="color:initial">PerformanceEntry</span>
     <li><span class="dfn-paneled" id="term-for-dom-performanceentry-duration" style="color:initial">duration</span>
     <li><span class="dfn-paneled" id="term-for-dom-performanceentry-entrytype" style="color:initial">entryType</span>
     <li><span class="dfn-paneled" id="term-for-dom-performanceentry-name" style="color:initial">name</span>
     <li><span class="dfn-paneled" id="term-for-dfn-queue-a-performanceentry" style="color:initial">queue the performanceentry</span>
     <li><span class="dfn-paneled" id="term-for-dom-performanceentry-starttime" style="color:initial">startTime</span>
     <li><span class="dfn-paneled" id="term-for-supportedentrytypes-attribute" style="color:initial">supportedEntryTypes</span>
    </ul>
   <li>
    <a data-link-type="biblio">[WebIDL]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-idl-DOMString" style="color:initial">DOMString</span>
     <li><span class="dfn-paneled" id="term-for-Default" style="color:initial">Default</span>
     <li><span class="dfn-paneled" id="term-for-Exposed" style="color:initial">Exposed</span>
     <li><span class="dfn-paneled" id="term-for-idl-object" style="color:initial">object</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-dom">[DOM]
   <dd>Anne van Kesteren. <a href="https://dom.spec.whatwg.org/">DOM Standard</a>. Living Standard. URL: <a href="https://dom.spec.whatwg.org/">https://dom.spec.whatwg.org/</a>
   <dt id="biblio-ecmascript">[ECMASCRIPT]
   <dd><a href="https://tc39.github.io/ecma262/">ECMAScript Language Specification</a>. URL: <a href="https://tc39.github.io/ecma262/">https://tc39.github.io/ecma262/</a>
   <dt id="biblio-hr-time-2">[HR-TIME-2]
   <dd>Ilya Grigorik; James Simonsen; Jatinder Mann. <a href="https://www.w3.org/TR/hr-time-2/">High Resolution Time Level 2</a>. 1 March 2018. CR. URL: <a href="https://www.w3.org/TR/hr-time-2/">https://www.w3.org/TR/hr-time-2/</a>
   <dt id="biblio-html">[HTML]
   <dd>Anne van Kesteren; et al. <a href="https://html.spec.whatwg.org/multipage/">HTML Standard</a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a>
   <dt id="biblio-performance-timeline-2">[PERFORMANCE-TIMELINE-2]
   <dd>Ilya Grigorik. <a href="https://www.w3.org/TR/performance-timeline-2/">Performance Timeline Level 2</a>. 23 April 2019. WD. URL: <a href="https://www.w3.org/TR/performance-timeline-2/">https://www.w3.org/TR/performance-timeline-2/</a>
   <dt id="biblio-webidl">[WebIDL]
   <dd>Boris Zbarsky. <a href="https://heycam.github.io/webidl/">Web IDL</a>. 15 December 2016. ED. URL: <a href="https://heycam.github.io/webidl/">https://heycam.github.io/webidl/</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">IDL Index</span><a class="self-link" href="#idl-index"></a></h2>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed②"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <a href="#performancelongtasktiming"><code class="highlight"><c- g>PerformanceLongTaskTiming</c-></code></a> : <a class="n" data-link-type="idl-name" href="https://w3c.github.io/performance-timeline/#the-performanceentry-interface" id="ref-for-the-performanceentry-interface②"><c- n>PerformanceEntry</c-></a> {
    <c- b>readonly</c-> <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<a class="n" data-link-type="idl-name" href="#taskattributiontiming" id="ref-for-taskattributiontiming⑦"><c- n>TaskAttributionTiming</c-></a>> <a class="idl-code" data-link-type="attribute" data-readonly data-type="FrozenArray<TaskAttributionTiming>" href="#dom-performancelongtasktiming-attribution" id="ref-for-dom-performancelongtasktiming-attribution⑥"><c- g>attribution</c-></a>;
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Default" id="ref-for-Default②"><c- g>Default</c-></a>] <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-object" id="ref-for-idl-object②"><c- b>object</c-></a> <a href="#dom-performancelongtasktiming-tojson"><code class="highlight"><c- g>toJSON</c-></code></a>();
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed①①"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <a href="#taskattributiontiming"><code class="highlight"><c- g>TaskAttributionTiming</c-></code></a> : <a class="n" data-link-type="idl-name" href="https://w3c.github.io/performance-timeline/#the-performanceentry-interface" id="ref-for-the-performanceentry-interface①①"><c- n>PerformanceEntry</c-></a> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString④"><c- b>DOMString</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMString" href="#dom-taskattributiontiming-containertype" id="ref-for-dom-taskattributiontiming-containertype⑥"><c- g>containerType</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①①"><c- b>DOMString</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMString" href="#dom-taskattributiontiming-containersrc" id="ref-for-dom-taskattributiontiming-containersrc⑥"><c- g>containerSrc</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString②①"><c- b>DOMString</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMString" href="#dom-taskattributiontiming-containerid" id="ref-for-dom-taskattributiontiming-containerid②"><c- g>containerId</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString③①"><c- b>DOMString</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMString" href="#dom-taskattributiontiming-containername" id="ref-for-dom-taskattributiontiming-containername⑥"><c- g>containerName</c-></a>;
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Default" id="ref-for-Default①①"><c- g>Default</c-></a>] <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-object" id="ref-for-idl-object①①"><c- b>object</c-></a> <a href="#dom-taskattributiontiming-tojson"><code class="highlight"><c- g>toJSON</c-></code></a>();
};

</pre>
  <aside class="dfn-panel" data-for="long-task">
   <b><a href="#long-task">#long-task</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-long-task">2. Terminology</a>
    <li><a href="#ref-for-long-task①">3.3. Pointing to the culprit</a> <a href="#ref-for-long-task②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="culprit-browsing-context-container">
   <b><a href="#culprit-browsing-context-container">#culprit-browsing-context-container</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-culprit-browsing-context-container">2. Terminology</a>
    <li><a href="#ref-for-culprit-browsing-context-container①">3.2. TaskAttributionTiming interface</a> <a href="#ref-for-culprit-browsing-context-container②">(2)</a> <a href="#ref-for-culprit-browsing-context-container③">(3)</a> <a href="#ref-for-culprit-browsing-context-container④">(4)</a> <a href="#ref-for-culprit-browsing-context-container⑤">(5)</a> <a href="#ref-for-culprit-browsing-context-container⑥">(6)</a> <a href="#ref-for-culprit-browsing-context-container⑦">(7)</a> <a href="#ref-for-culprit-browsing-context-container⑧">(8)</a>
    <li><a href="#ref-for-culprit-browsing-context-container⑨">3.3. Pointing to the culprit</a> <a href="#ref-for-culprit-browsing-context-container①⓪">(2)</a> <a href="#ref-for-culprit-browsing-context-container①①">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="attribution">
   <b><a href="#attribution">#attribution</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-attribution">3.3. Pointing to the culprit</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="performancelongtasktiming">
   <b><a href="#performancelongtasktiming">#performancelongtasktiming</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-performancelongtasktiming">3.1. PerformanceLongTaskTiming interface</a> <a href="#ref-for-performancelongtasktiming①">(2)</a>
    <li><a href="#ref-for-performancelongtasktiming②">3.3. Pointing to the culprit</a> <a href="#ref-for-performancelongtasktiming③">(2)</a>
    <li><a href="#ref-for-performancelongtasktiming④">4.1. Report long tasks</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="unknown">
   <b><a href="#unknown">#unknown</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-unknown">3.3. Pointing to the culprit</a>
    <li><a href="#ref-for-unknown①">4.1. Report long tasks</a> <a href="#ref-for-unknown②">(2)</a> <a href="#ref-for-unknown③">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="self">
   <b><a href="#self">#self</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-self">3.3. Pointing to the culprit</a>
    <li><a href="#ref-for-self①">4.1. Report long tasks</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="same-origin-ancestor">
   <b><a href="#same-origin-ancestor">#same-origin-ancestor</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-same-origin-ancestor">3.3. Pointing to the culprit</a>
    <li><a href="#ref-for-same-origin-ancestor①">4.1. Report long tasks</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="same-origin-descendant">
   <b><a href="#same-origin-descendant">#same-origin-descendant</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-same-origin-descendant">3.3. Pointing to the culprit</a>
    <li><a href="#ref-for-same-origin-descendant①">4.1. Report long tasks</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="same-origin">
   <b><a href="#same-origin">#same-origin</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-same-origin③">3.3. Pointing to the culprit</a>
    <li><a href="#ref-for-same-origin⑤">4.1. Report long tasks</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="cross-origin-ancestor">
   <b><a href="#cross-origin-ancestor">#cross-origin-ancestor</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-cross-origin-ancestor">3.3. Pointing to the culprit</a>
    <li><a href="#ref-for-cross-origin-ancestor①">4.1. Report long tasks</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="cross-origin-descendant">
   <b><a href="#cross-origin-descendant">#cross-origin-descendant</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-cross-origin-descendant">3.3. Pointing to the culprit</a>
    <li><a href="#ref-for-cross-origin-descendant①">4.1. Report long tasks</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="cross-origin-unreachable">
   <b><a href="#cross-origin-unreachable">#cross-origin-unreachable</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-cross-origin-unreachable">3.3. Pointing to the culprit</a>
    <li><a href="#ref-for-cross-origin-unreachable①">4.1. Report long tasks</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="multiple-contexts">
   <b><a href="#multiple-contexts">#multiple-contexts</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-multiple-contexts">3.3. Pointing to the culprit</a>
    <li><a href="#ref-for-multiple-contexts①">4.1. Report long tasks</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-performancelongtasktiming-attribution">
   <b><a href="#dom-performancelongtasktiming-attribution">#dom-performancelongtasktiming-attribution</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-performancelongtasktiming-attribution">3.1. PerformanceLongTaskTiming interface</a>
    <li><a href="#ref-for-dom-performancelongtasktiming-attribution①">3.3. Pointing to the culprit</a> <a href="#ref-for-dom-performancelongtasktiming-attribution②">(2)</a> <a href="#ref-for-dom-performancelongtasktiming-attribution③">(3)</a>
    <li><a href="#ref-for-dom-performancelongtasktiming-attribution④">4.1. Report long tasks</a> <a href="#ref-for-dom-performancelongtasktiming-attribution⑤">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="taskattributiontiming">
   <b><a href="#taskattributiontiming">#taskattributiontiming</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-taskattributiontiming">3.1. PerformanceLongTaskTiming interface</a> <a href="#ref-for-taskattributiontiming①">(2)</a>
    <li><a href="#ref-for-taskattributiontiming②">3.2. TaskAttributionTiming interface</a> <a href="#ref-for-taskattributiontiming③">(2)</a>
    <li><a href="#ref-for-taskattributiontiming④">3.3. Pointing to the culprit</a>
    <li><a href="#ref-for-taskattributiontiming⑤">4.1. Report long tasks</a> <a href="#ref-for-taskattributiontiming⑥">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-taskattributiontiming-containertype">
   <b><a href="#dom-taskattributiontiming-containertype">#dom-taskattributiontiming-containertype</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-taskattributiontiming-containertype">3.2. TaskAttributionTiming interface</a>
    <li><a href="#ref-for-dom-taskattributiontiming-containertype①">4.1. Report long tasks</a> <a href="#ref-for-dom-taskattributiontiming-containertype②">(2)</a> <a href="#ref-for-dom-taskattributiontiming-containertype③">(3)</a> <a href="#ref-for-dom-taskattributiontiming-containertype④">(4)</a> <a href="#ref-for-dom-taskattributiontiming-containertype⑤">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-taskattributiontiming-containername">
   <b><a href="#dom-taskattributiontiming-containername">#dom-taskattributiontiming-containername</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-taskattributiontiming-containername">3.2. TaskAttributionTiming interface</a>
    <li><a href="#ref-for-dom-taskattributiontiming-containername①">4.1. Report long tasks</a> <a href="#ref-for-dom-taskattributiontiming-containername②">(2)</a> <a href="#ref-for-dom-taskattributiontiming-containername③">(3)</a> <a href="#ref-for-dom-taskattributiontiming-containername④">(4)</a> <a href="#ref-for-dom-taskattributiontiming-containername⑤">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-taskattributiontiming-containerid">
   <b><a href="#dom-taskattributiontiming-containerid">#dom-taskattributiontiming-containerid</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-taskattributiontiming-containerid">3.2. TaskAttributionTiming interface</a>
    <li><a href="#ref-for-dom-taskattributiontiming-containerid①">4.1. Report long tasks</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-taskattributiontiming-containersrc">
   <b><a href="#dom-taskattributiontiming-containersrc">#dom-taskattributiontiming-containersrc</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-taskattributiontiming-containersrc">3.2. TaskAttributionTiming interface</a>
    <li><a href="#ref-for-dom-taskattributiontiming-containersrc①">4.1. Report long tasks</a> <a href="#ref-for-dom-taskattributiontiming-containersrc②">(2)</a> <a href="#ref-for-dom-taskattributiontiming-containersrc③">(3)</a> <a href="#ref-for-dom-taskattributiontiming-containersrc④">(4)</a> <a href="#ref-for-dom-taskattributiontiming-containersrc⑤">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="minimal-culprit-attribution">
   <b><a href="#minimal-culprit-attribution">#minimal-culprit-attribution</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-minimal-culprit-attribution">4.1. Report long tasks</a>
   </ul>
  </aside>
<script>/* script-var-click-highlighting */

    document.addEventListener("click", e=>{
        if(e.target.nodeName == "VAR") {
            highlightSameAlgoVars(e.target);
        }
    });
    {
        const indexCounts = new Map();
        const indexNames = new Map();
        function highlightSameAlgoVars(v) {
            // Find the algorithm container.
            let algoContainer = null;
            let searchEl = v;
            while(algoContainer == null && searchEl != document.body) {
                searchEl = searchEl.parentNode;
                if(searchEl.hasAttribute("data-algorithm")) {
                    algoContainer = searchEl;
                }
            }

            // Not highlighting document-global vars,
            // too likely to be unrelated.
            if(algoContainer == null) return;

            const algoName = algoContainer.getAttribute("data-algorithm");
            const varName = getVarName(v);
            const addClass = !v.classList.contains("selected");
            let highlightClass = null;
            if(addClass) {
                const index = chooseHighlightIndex(algoName, varName);
                indexCounts.get(algoName)[index] += 1;
                indexNames.set(algoName+"///"+varName, index);
                highlightClass = nameFromIndex(index);
            } else {
                const index = previousHighlightIndex(algoName, varName);
                indexCounts.get(algoName)[index] -= 1;
                highlightClass = nameFromIndex(index);
            }

            // Find all same-name vars, and toggle their class appropriately.
            for(const el of algoContainer.querySelectorAll("var")) {
                if(getVarName(el) == varName) {
                    el.classList.toggle("selected", addClass);
                    el.classList.toggle(highlightClass, addClass);
                }
            }
        }
        function getVarName(el) {
            return el.textContent.replace(/(\s| )+/, " ").trim();
        }
        function chooseHighlightIndex(algoName, varName) {
            let indexes = null;
            if(indexCounts.has(algoName)) {
                indexes = indexCounts.get(algoName);
            } else {
                // 7 classes right now
                indexes = [0,0,0,0,0,0,0];
                indexCounts.set(algoName, indexes);
            }

            // If the element was recently unclicked,
            // *and* that color is still unclaimed,
            // give it back the same color.
            const lastIndex = previousHighlightIndex(algoName, varName);
            if(indexes[lastIndex] === 0) return lastIndex;

            // Find the earliest index with the lowest count.
            const minCount = Math.min.apply(null, indexes);
            let index = null;
            for(var i = 0; i < indexes.length; i++) {
                if(indexes[i] == minCount) {
                    return i;
                }
            }
        }
        function previousHighlightIndex(algoName, varName) {
            return indexNames.get(algoName+"///"+varName);
        }
        function nameFromIndex(index) {
            return "selected" + index;
        }
    }
    </script>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>